<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>登录</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/login.css">
        <!-- 微博 -->
        <!-- <script type="text/javascript" src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=*******&debug=true" charset="utf-8"></script> -->
        
    </head>
    <body>
        <div class="login-main">
            <div class="login-form">
                <img class="red-logo" src="image/red-logo.png" alt="">
                <form method="post" action="" onsubmit="return false" id="form1" autocomplete="off">
                    <div class="userName">
                        <div class="userName-item">
                            <div class="user-img"><img src="image/icon-user.png" alt=""></div>
                            <input class="inp-username" id="Name" name="Name" type="text" placeholder="请输入用户名/邮箱/账号">
                        </div>
                        <p data-index="0" class="error-mes"></p>
                    </div>
                    <div class="pass">
                        <div class="pass-item">
                            <div class="pass-img"><img src="image/icon-pass.png" alt=""></div>
                            <input class="inp-pass" id="passWord" name="passWord" type="password" placeholder="输入密码">
                        </div>
                        <p data-index="1" class="error-mes"></p>
                    </div>
                    <div class="forget-pass">
                        <span class="checkbox"><input type="checkbox" name="">下次自动登录</span>
                        <a href="">忘记密码</a>
                    </div>
                    <div class="but-sub"><button type="submit" id="RelatedBut1">登录</button></div>
                </form>
            </div>
            <div class="third-party"><span>选择第三方登录</span></div>
            <div class="login-way">
                <ul>
                    <li>
                        <a href="javascript:void;"><img class="iocn-qq" id="qqLoginBtn" src="image/iocn-qq.png" alt=""></a>
                        <span>QQ</span>
                    </li>
                    <li>
                        <a href="javascript:void;"><img class="icon-wechat" id="" src="image/icon-wechat.png" alt=""></a>
                        <span>微信</span>
                    </li>
                    <li>
                        <a href="javascript:void;"><img class="iocn-webo" id="wb_connect_btn" src="image/iocn-webo.png" alt=""></a>
                        <span>微博</span>
                    </li>
                </ul>
            </div>
        </div>
        <script type="text/javascript" src="http://img.chuandong.com/common/script/jquery.js"></script>
        <script type="text/javascript" src="js/common.js"></script>
        <!-- QQ -->
        <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101490224" charset="utf-8"></script>
        <!-- 三方登录处理 -->
        <script>
            // 微博登录
        //     WB2.anyWhere(function (W) {
        //         W.widget.connectButton({
        //             id: "wb_connect_btn",
        //             type: '3,2',
        //             callback: {
        //                 login: function (o) { //登录后的回调函数
        // 　　　　　　　　　　　　console.log(o);
        //                     thirdparty(null,null,o.avatar_hd, o.name ,3, o.id);//个人方法
        //                     try{
        //                         document.getElementsByClassName('loginout')[0].click();
        // 　　　　　　　　　　　　　　　//页面需求，当前页面登录完成之后，不进行跳转，所以模拟点击事件，让微博账号在当前域中退出。不影响下次登录。（元素为微博动态添加）
        // 　　　　　　　　　　　　　　　//微博没有提供退出方法。下面的logout为另一种开发模式调用。
        
        //                     }catch(e){
        //                         console.log(e);
        //                     }
        //                 },
        //                 logout: function () { //退出后的回调函数
        //                 }
        //             }
        //         });
        //     });

            // QQ登录
            QC.Login({
                    //btnId：插入按钮的节点id，必选
                    btnId:"qqLoginBtn",
                    //用户需要确认的scope授权项，可选，默认all
                    scope:"all",
                    //按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_S
                    size: "B_S"
                }, function(reqData, opts){//登录成功
                    //根据返回数据，更换按钮显示状态方法
                    console.log(reqData);//查看返回数据
                    // QC.Login.getMe(function(openId, accessToken){//获取用户的openId
                    //     console.log('QQOPENID:'+openId);
                    //     thirdparty(null,null,reqData.figureurl_qq_2,reqData.nickname,1,openId);
                    //     QC.Login.signOut();//退出QQ登录调用事件
                    // });
                }
            );
        </script>
        <script>
            $('#RelatedBut1').click(function () {
                var name = $('#Name').val();
                var passWord = $('#passWord').val();
                
                if (name == "") {
                    $('.error-mes').eq(0).text('请填用户名称！')
                    $("#Name").focus();
                    return false;
                } else {
                    $('.error-mes').eq(0).text('')
                }
                if (passWord == "") {
                    $('.error-mes').eq(1).text('请填写密码')
                    $("#passWord").focus();
                    return false;
                } else {
                    $('.error-mes').eq(1).text('')
                }
            })
            // $(function () {
            //     $('.inp-username').live('input propertychange', function(){
            //         if ($(this).val()) {
            //             $('.user-img').css({'background':'#ff3433'})
            //             $(this).css({'border':'1px solid #ff3433'})
            //             $('.error-mes').eq(0).text('')
            //         }
            //     })
            //     $('.inp-pass').live('input propertychange', function(){
            //         if ($(this).val()) {
            //             $('.pass-img').css({'background':'#ff3433'})
            //             $(this).css({'border':'1px solid #ff3433'})
            //             $('.but-sub button').css({'background':'#ff3433','color':'#fff'})
            //             $('.error-mes').eq(1).text('')
            //         }
            //     })
            // })
        </script>
    </body>
</html>